<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="addView">新增</el-button>
    </div>
    <el-table :data="tableData" border stripe v-loading="tableLoading">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="关系" prop="relation"></el-table-column>
      <el-table-column label="联系电话" prop="phone"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="editInfo(scope.row)"
            style="margin-right: 20px"
          >修改</el-button>
          <el-popconfirm title="这条记录确定删除吗？" @confirm="delInfo(scope.row)">
            <el-button
              slot="reference"
              type="text"
              size="small"
              icon="el-icon-delete"
              style="color: red"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增亲友关系"
      :visible.sync="visible"
      width="30%"
      :append-to-body="true"
      @close="close"
    >
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="small"
      >
        <el-form-item label="选择关系" prop="relation">
          <el-select v-model="form.relation" value-key placeholder="请选择关系" clearable filterable>
            <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请填写姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请填写电话" clearable></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="visible = false" :loading="loading">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  patientRelationList,
  listFamily,
  saveFamily,
  delFamily
} from "@/api/manbing/patient.js";
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      }
      //正则表达式
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号不正确！"));
      }
      return callback();
    };
    return {
      tableLoading: false,
      loading: false,
      tableData: [],
      visible: false,
      form: {},
      options: [],
      rules: {
        relation: [{ required: true, message: "请选择关系", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }]
      },
      item: {}
    };
  },
  created() {},
  mounted() {},
  methods: {
    getList(item) {
      this.item = item;
      this.tableLoading = true;
      listFamily({
        patientId: item.patientId
      })
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    getRelation() {
      patientRelationList({}).then(res => {
        if (res.code == 200) {
          this.options = res.data;
        }
      });
    },
    addView() {
      this.visible = true;
      this.form = {};
      this.getRelation();
    },
    editInfo(item) {
      this.visible = true;
      this.form = item;
      this.getRelation();
    },
    delInfo(item) {
      delFamily({ familyId: item.familyId }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getList(this.item);
        }
      });
    },
    submit() {
      console.log(321);
      this.loading = true;
      this.form.patientId = this.item.patientId;

      this.$refs["form"].validate(valid => {
        if (valid) {
          saveFamily(this.form)
            .then(res => {
              if (res.code == 200) {
                if (this.form.familyId) {
                  this.$message({
                    message: "修改成功",
                    type: "success"
                  });
                } else {
                  this.$message({
                    message: "新增成功",
                    type: "success"
                  });
                }
                this.visible = false;
                this.getList(this.item);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.$message({
            message: "请正确填写表单",
            type: "warning"
          });
          this.loading = false;
        }
      });
    },
    close() {}
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
}
</style>